<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu active-text-color="#ffd04b" :unique-opened="true" :default-active = "activeMenu" router @select="handleSelect">
        <my-menu :data="menuData"  />
      </el-menu>
    </el-aside>

    <el-container>
      <el-header >
        <div style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
        </div>
        <div id = "menuTagDiv">
          <menu-tag ref = "menuTag"></menu-tag>
        </div>
      </el-header>

      <el-main>
        <keep-alive :exclude="excludeName" max = "10">
          <router-view />
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MyMenu from "@/components/admin/MyMenu.vue";
import MenuTag from "@/components/admin/MenuTag.vue";
import { mapState } from 'vuex'
export default {
  components: {
    MyMenu:MyMenu,
    MenuTag:MenuTag
  },
  data() {
    return {
      menuData: {},
      menus:[],
      currentCom: {},
      excludeName:"",
    };
  },
  computed:{
    ...mapState(["activeMenu"])
  },
  methods: {
    getMenu() {
      this.COMMON.httpPost(
        this,
        "menuOperation/getMenus",
        {},
        (result) => {
          if (result.result == "SUCCESS") {
            this.menuData = result.data.childrens;
            this.menus = new Array();
            this.getMenus(this.menuData);
            this.currentCom = MyMenu;
          } else {
          }
        },
        (result) => {}
      );
    },
    getMenus(menuData){
      menuData.forEach(element => {
        if(element.path !== null && element.path !== undefined && element.path !== ""){
          this.menus.push(element);
        }else{
          if(element.childrens.len !== 0){
            this.getMenus(element.childrens)
          }
        }
      });
    },
    handleSelect(index,path){
      console.log(index, path);
      this.menus.forEach(element=>{
        if(("/home"+element.path) === index){
          var tag = {name:element.name,index:index};
          this.$refs.menuTag.addTag(tag);
        }
      });
    },
    addtest(){
      this.excludeName = "";
    },
  },
  mounted: function () {
    this.getMenu();
  },
};
</script>

<style>
body {
  margin: 0px;
  padding: 0;
}
#menuTagDiv {
  width: 100%;
}
</style>